<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highchart</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
	    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	    <link rel="stylesheet" href="/resources/demos/style.css">
	    <script src="../js/jquery.popupWindow.js"></script>
	    <script src="../js/highcharts.js"></script>
		<script src="../js/exporting.js"></script>

	<!-- 하이차트 2 -->
	<script type="text/javascript">
	$(function () {
		
		$.ajax({
	        url : "admin_Chart_Basicline.do",
	        dataType : "json",
	        success : function(data) {
	        	
	        	$.each(data.sex_man,function(index,items){
	        		var x;
	        		x= items.man
	 	        	x = Number(x);
	        	 
	        	$.each(data.sex_she,function(index,items){
	        		var y; 
	        		y= items.she
	        		y = Number(y);
	        		
	    $('#container2').highcharts({
	        chart: {
	            type: 'area'
	        },
	        title: {
	            text: '입사지원 남녀 지원 현황'
	        },
	        xAxis: {
	            allowDecimals: false,
	            labels: {
	                formatter: function () {
	                    return this.value; // clean, unformatted number for year
	                }
	            }
	        },
	        yAxis: {
	            title: {
	                text: '인원'
	            },
	            labels: {
	                formatter: function () {
	                    return this.value / 2 + '명';
	                }
	            }
	        },
	        tooltip: {
	            pointFormat: '{series.name} 년 <b>{point.y:,.0f} 명</b>'
	        },
	        plotOptions: {
	            area: {
	                pointStart: 2023-12-01,
	                marker: {
	                    enabled: false,
	                    symbol: 'circle',
	                    radius: 2,
	                    states: {
	                        hover: {
	                            enabled: true
	                        }
	                    }
	                }
	            }
	        },
	        series: [{
	            name: '남자',
	            data: [8, 10, 12, 15, x]
	        }, {
	            name: '여자',
	            data: [5, 7, 11, 12, y]
							}]
						});
					});
				});
			},
	        	
		        error : function(request, status, error) {
		           console.log("code:" + request.status + "\n"
		                 + "message:" + request.responseText
		                 + "\n" + "error:" + error);
										}
									});
								});
	
	</script>

	</head>
	<body>
		<p><div id="container2" style="width: 430px; height: 380px; margin: 0"></div></p>
	</body>
</html>